<template>
  <div>
    <div class="box-header box">
      <el-card>
        <el-page-header
          :title="$t('common.back')"
          :content="$t('modules.contract.edit_contract')"
          style="margin-bottom: 20px"
          @back="back"
        />
        <!-- 合同详情 -->
        <div style="font-size: 18px; margin: 0px 0px 20px 10px">
          <span
            style="
              display: inline-block;
              height: 30px;
              border-left: 4px solid #2569c3;
              text-indent: 10px;
            "
            >{{ $t("modules.contract.basic") }}
          </span>
        </div>
        <el-form
          ref="contractData"
          v-loading.fullscreen.lock="loading"
          :model="contractData"
          label-width="150px"
          :rules="rules"
        >
          <el-row class="flexContract">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item
                :label="$t('common.customer_name')"
                class="item"
                prop="userName"
              >
                <el-input
                  ref="name"
                  v-model="contractData.userName"
                  :disabled="true"
                  clearable
                  style="width: 100%"
                  @focus="getKeyId($event)"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item
                class="item"
                :label="$t('modules.contract.contract_no')"
                prop="contractNum"
                style="width: 100%"
              >
                <el-input
                  v-model="contractData.contractNum"
                  maxlength="32"
                  show-word-limit
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="flexContract">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item
                class="item"
                :label="$t('common.startDate')"
                prop="effectiveDate"
              >
                <el-date-picker
                  v-model="contractData.effectiveDate"
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  value-format="YYYYMMDD"
                  range-separator="-"
                  :start-placeholder="$t('common.start_time')"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item
                class="item"
                :label="$t('modules.contract.sign_entity_id')"
                prop="signEntityId"
                style="width: 100%"
              >
                <el-select
                  v-model="contractData.signEntityId"
                  clearable
                  style="width: 100%"
                  placeholder=""
                >
                  <el-option
                    v-for="item in signOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="email">
            <template #label>
              <span>
                <div style="margin-bottom: -20px">
                  {{ $t("flycare.contract.fixed_notify_email") }}
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        {{ $t("modules.contract.email_hint") }}
                      </div></template
                    >
                    <i class="el-icon-warning" style="font-size: 2px" />
                  </el-tooltip>
                </div> </span
            ></template>
            <!--            <el-input-->
            <!--              v-model="fixedEmail"-->
            <!--              style="display: inline-block"-->
            <!--              -->
            <!--              type="textarea"-->
            <!--              maxlength="1000"-->
            <!--              readonly-->
            <!--            />-->
            <label>{{ fixedEmail }}</label>
          </el-form-item>
          <el-form-item prop="email">
            <template #label>
              <span>
                <div style="margin-bottom: -20px">
                  {{ $t("modules.contract.email") }}
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        {{ $t("modules.contract.email_hint") }}
                      </div></template
                    >
                    <i class="el-icon-warning" style="font-size: 2px" />
                  </el-tooltip>
                </div> </span
            ></template>
            <el-input
              v-model="contractData.email"
              style="display: inline-block"
              type="textarea"
              maxlength="1000"
              :placeholder="$t('modules.contract.email_notify')"
              rows="2"
            />
          </el-form-item>
          <el-form-item
            :label="$t('modules.contract.remark')"
            style="margin-bottom: 20px"
          >
            <el-input
              v-model="contractData.remark"
              maxlength="500"
              type="textarea"
              rows="2"
            />
          </el-form-item>
          <!-- 合同模块详情 -->
          <div style="font-size: 18px; margin: 0px 0px 20px 10px">
            <span
              style="
                display: inline-block;
                height: 30px;
                border-left: 4px solid #2569c3;
                text-indent: 10px;
              "
              >{{ $t("modules.contract.modules_title") }}</span
            >
            <el-button
              v-permission="{ permission: '10401000.MANAGE' }"
              class="w-8 ml-4"
              type="primary"
              @click="openContractModule"
              ><svg-icon icon-class="plus" class="text-lg"
            /></el-button>
          </div>
          <template>
            <div
              class="selectColumn"
              :class="multipleSelection.length > 0 ? 'active' : ''"
            >
              <span class="selectSpan">{{ deleteCount }}</span>
              <span class="selectSpan" style="">{{ $t("modules.contract.select") }}</span>
              <span class="selectBorder" />
              <el-button
                v-permission="{ permission: '10401000.DELETE' }"
                style="margin-left: 20px; padding: 5px 5px"
                size="small"
                type="primary"
                class="buttonDelete"
                @click="deleteModules"
              >
                <svg-icon icon-class="delete" class="text-lg" style="font-size: 15px" />
                {{ $t("modules.contract.contract_delete") }}</el-button
              >
            </div>
            <el-table
              v-loading="moduleLoading"
              :data="moduleData"
              style="width: 100%; margin-left: 0px"
            >
              <template #empty>
                <el-empty :image-size="100" description="No data" />
              </template>
              <!--              <el-table-column-->
              <!--                prop="platCode"-->
              <!--                :label="$t('modules.contract.plat')"-->
              <!--              >-->
              <!--                <template v-slot="scope">-->
              <!--                  <span>{{ $t('contract_plat.' + scope.row.platCode) }}</span>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column
                prop="billingServiceCode"
                :label="$t('modules.contract.billing_method')"
                :formatter="formatterStatistic"
                width="220px"
              >
                <template v-slot="scope">
                  <p>{{ $t("contract_plat." + scope.row.platCode) }}</p>
                  <p>
                    {{
                      $t(
                        "flycare.billing_service." +
                          scope.row.billingServiceCode +
                          ".name"
                      )
                    }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column :label="'Billing mode'">
                <template v-slot="scope">
                  <p v-if="scope.row.serviceAmount">
                    {{
                      "$" +
                      Number(scope.row.serviceAmount).toLocaleString() +
                      (scope.row.serviceQuantity
                        ? " for " +
                          Number(scope.row.serviceQuantity).toLocaleString() +
                          " " +
                          $t(
                            "flycare.billing_service." +
                              scope.row.billingServiceCode +
                              ".quantity_unit"
                          )
                        : "")
                    }}
                  </p>
                  <p v-if="scope.row.price">
                    {{
                      Number(scope.row.price).toLocaleString() +
                      " " +
                      $t(
                        "flycare.billing_service." +
                          scope.row.billingServiceCode +
                          ".price_unit"
                      )
                    }}
                  </p>
                  <p v-if="scope.row.freeNum">
                    {{
                      Number(scope.row.freeNum).toLocaleString() +
                      " " +
                      $t(
                        "flycare.billing_service." +
                          scope.row.billingServiceCode +
                          ".quantity_unit"
                      ) +
                      " for free " +
                      (scope.row.freeExpireTime
                        ? "(Expire: " + formatToMonth(scope.row.freeExpireTime) + ")"
                        : "")
                    }}
                  </p>
                </template>
              </el-table-column>
              <!--              <el-table-column-->
              <!--                :label="$t('modules.contract.service_quantity')"-->
              <!--                -->
              <!--              >-->
              <!--                <template v-slot="scope">-->
              <!--                  <span>{{ scope.row.serviceQuantity ? Number(scope.row.serviceQuantity).toLocaleString() : '-' }}</span>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column :label="$t('modules.contract.valid_period')">
                <template v-slot="scope">
                  <span>{{
                    formatServiceValidTime(
                      scope.row.serviceStartTime,
                      scope.row.serviceEndTime,
                      scope.row.serviceQuantityUnit
                    )
                  }}</span>
                </template>
              </el-table-column>
              <!--              <el-table-column-->
              <!--                :label="$t('modules.contract.service_expire_time')"-->
              <!--                -->
              <!--              >-->
              <!--                <template v-slot="scope">-->
              <!--                  <span>{{ scope.row.serviceEndTime ? formatToMonth(parseInt(scope.row.serviceEndTime)):'-' }}</span>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <!--              <el-table-column-->
              <!--                :label="$t('modules.contract.unit_price')"-->
              <!--                -->
              <!--              >-->
              <!--                <template v-slot="scope">-->
              <!--                  <el-tooltip-->
              <!--                    v-if="scope.row.price"-->
              <!--                    class="item"-->
              <!--                    effect="dark"-->
              <!--                    :content="scope.row.price + ' '-->
              <!--                      + $t('flycare.billing_service.' + scope.row.billingServiceCode + '.price_unit')"-->
              <!--                    placement="top-start">-->
              <!--                    <span>{{ '$' + scope.row.price }}</span>-->
              <!--                  </el-tooltip>-->
              <!--                  <span v-else>{{ '-' }}</span>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <!--              <el-table-column-->
              <!--                prop="freeNum"-->
              <!--                :label="$t('modules.contract.free_count')"-->
              <!--                -->
              <!--              >-->
              <!--                <template v-slot="scope">-->
              <!--                  <p>{{ scope.row.freeNum ? Number(scope.row.freeNum).toLocaleString() : '-' }}</p>-->
              <!--                  <p v-if="scope.row.freeExpireTime">-->
              <!--                    <el-tag size="small" type="warning">{{ 'Expire:' + formatToMonth(scope.row.freeExpireTime) }}</el-tag>-->
              <!--                  </p>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column :label="$t('common.status')" prop="status" width="100px">
                <template v-slot="scope">
                  <div class="montyly-resource-settlement-tooltip">
                    <el-tooltip v-if="scope.row.status == 0" placement="top-start">
                      <template #content>
                        <div style="max-width: 300px; line-height: 160%">
                          <span
                            >{{ $t("modules.contract.invalid_time") }}:
                            {{ scope.row.invalidTime }}</span
                          ><br />
                          <span
                            >{{ $t("modules.contract.invalid_person") }}:
                            {{ scope.row.invalidUserName }}</span
                          >
                        </div></template
                      >
                      <div>
                        <el-tag
                          size="small"
                          :type="scope.row.status == '1' ? 'success' : 'danger'"
                          disable-transitions
                        >
                          {{ formatContractModuleStatus(scope.row.status) }}
                        </el-tag>
                      </div>
                    </el-tooltip>
                    <div v-else>
                      <el-tag
                        size="small"
                        :type="formatStatusType(scope.row.status)"
                        disable-transitions
                      >
                        {{ formatContractModuleStatus(scope.row.status) }}
                      </el-tag>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="remark" :label="$t('common.remark')" />
              <el-table-column fixed="right" :label="$t('modules.contract.operate')">
                <template v-slot="scope">
                  <div v-if="scope.row.status !== -1">
                    <el-button
                      v-permission="{ permission: '10401000.DELETE' }"
                      type="text"
                      size="small"
                      @click="deleteModule(scope.row.contractModuleId)"
                      >{{ $t("common.delete") }}</el-button
                    >
                    <el-button
                      v-permission="{ permission: '10401000.MANAGE' }"
                      type="text"
                      size="small"
                      @click="openContractModule(scope.row, true)"
                    >
                      {{ $t("modules.contract.contract_edit") }}
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-form-item class="buttomItem">
            <el-button @click="back">{{ $t("common.cancel") }}</el-button>
            <el-button
              v-permission="{ permission: '10401000.MANAGE' }"
              type="primary"
              style="margin-right: 10px"
              @click="editContract"
              >{{ $t("common.confirm") }}</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 添加或者编辑合同模块对话框 -->
    <contract-module
      ref="contractModule"
      v-model="contractModuleVisible"
      @addModule="addContractModule"
      @editModule="editModuleInfo"
      @updateAutoRenewal="updateAutoRenewal"
    />
    <contract-conflict ref="contractConflict" v-model="contractConflictVisible" />
  </div>
</template>
<script>
import {
  checkContract,
  deleteContractModule,
  editContractModule,
  addContractModule,
  editContract,
  updateAutoRenewal,
  getDefaultEmail,
} from "@/api/contract";
import { toTime, toTenYMD } from "@/utils/index";
import ContractModule from "./components/contract-module";
import ContractConflict from "./components/contract-conflict";
export default {
  components: {
    ContractModule,
    ContractConflict,
  },
  data() {
    var emailValidator = (rule, value, callback) => {
      var reg = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
      if (value !== "") {
        var emailList = value.split(";");
        for (var i = 0; i < emailList.length; i++) {
          if (emailList[i] !== "") {
            if (!reg.test(emailList[i])) {
              // console.log(222, emailList[i])
              return callback(new Error(this.$t("common.email_form_error")));
            }
          }
        }
        callback();
      }
      callback();
    };
    return {
      settings: {
        conditions: [],
        columns: [],
      },
      fixedEmail: "",
      loading: false,
      moduleLoading: false,
      condition: "",
      operateTitle: "", // 添加or编辑合同模块的对话框标题
      isEdit: false,
      deleteCount: 0,
      isAdd: false,
      contractModuleVisible: false,
      contractConflictVisible: false,
      fullBusiness: false,
      value: "",
      moduleForm: {
        contractModuleId: "",
        platCode: "",
        moduleCode: "",
        statisticMethod: "",
        statisticMethodCode: "",
        billingCycle: "MONTH",
        billTarget: "MODULE",
        currency: "USD",
        price: "",
        freeNum: 0,
        billStartTime: new Date().getTime(),
        remark: "",
      },
      moduleData: [],
      customerData: [],
      contractData: {
        contractDate: "",
        characterCode: "",
        keyId: "",
        contractNum: "",
        effectiveDate: "",
        expiringDate: "",
        remark: "",
        email: "",
        moduleList: [],
      },
      cycleOptions: [
        {
          value: "30",
          label: "Month",
        },
      ],
      signOptions: [
        { label: "新大陆支付NLPM01", value: "NLPM01" },
        { label: "新大陆香港NLHK01", value: "NLHK01" },
        { label: "新大陆巴西NLBR03", value: "NLBR03" },
      ],
      multipleSelection: "",
      userName: "",
      platOptions: [],
      moduleOptions: [],
      statisticOptions: [],
      rules: {
        userName: [
          {
            required: true,
            message: this.$t("modules.contract.select_customer_name"),
            trigger: "blur",
          },
        ],
        email: [
          {
            validator: emailValidator,
            message: this.$t("modules.login.message.invalid_email_format"),
          },
        ],
        contractNum: [
          {
            required: true,
            message: this.$t("modules.contract.contract_number_require"),
            trigger: "blur",
          },
        ],
        effectiveDate: [
          {
            required: true,
            message: this.$t("modules.contract.contract_date_require"),
            trigger: "blur",
          },
        ],
        signEntityId: [
          {
            required: true,
            message: this.$t("modules.contract.sign_require"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    settingList() {
      return {
        columns: [
          {
            title: this.$t("common.short_name"),
            code: "SHORT_NAME",
          },
          {
            title: this.$t("common.address"),
            code: "ADDRESS",
          },
          {
            title: this.$t("common.link_man"),
            code: "LINKMAN",
          },
          {
            title: this.$t("common.mobile"),
            code: "MOBILE",
          },
          {
            title: this.$t("common.email"),
            code: "EMAIL",
          },
        ],
      };
    },
    defaultSettings() {
      return {
        columns: [],
      };
    },
  },
  mounted() {
    this.getContractDetail();
    this.getDefaultNotifyEmail();
  },
  methods: {
    showHeader(label) {
      // 重置高度
      // this.$nextTick(() => {
      //   this.$refs.customerData.doLayout()
      // })
      var list = this.settings["columns"];
      return list ? list.includes(label) : false;
    },
    formatToMonth(timestamp) {
      const ymd = toTenYMD(timestamp);
      return ymd;
    },
    formatServiceValidTime(serviceStartTime, serviceEndTime, serviceQuantityUnit) {
      if (!serviceStartTime && !serviceEndMonth) return "-";
      let serviceStartMonth = "*";
      let serviceEndMonth = "*";
      if (serviceStartTime) {
        serviceStartMonth = this.formatToMonth(serviceStartTime);
        if (serviceQuantityUnit === "SINGLE") {
          return serviceStartMonth;
        }
      }
      if (serviceEndTime) {
        serviceEndMonth = this.formatToMonth(serviceEndTime);
      }
      return serviceStartMonth + " ~ " + serviceEndMonth;
    },
    formatStatusType(status) {
      if (status === 1) {
        return "success";
      }
      if (status === 0) {
        return "danger";
      }
      if (status === -1) {
        return "info";
      }
      return "success";
    },
    formatContractModuleStatus(status) {
      if (status === 1) {
        return this.$t("modules.contract.status_option[1].label");
      }
      if (status === 0) {
        return this.$t("modules.contract.status_option[0].label");
      }
      if (status === -1) {
        return this.$t("modules.contract.status_option[2].label");
      }
    },
    getDefaultNotifyEmail() {
      getDefaultEmail().then((res) => {
        this.fixedEmail = "";
        if (res.length > 0) {
          res.forEach((email) => {
            this.fixedEmail += email + ";";
          });
          this.fixedEmail = this.fixedEmail.substring(0, this.fixedEmail.length - 1);
        }
      });
    },
    showFormItem(label) {
      var list = this.settings["conditions"];
      return list ? list.includes(label) : false;
    },
    userNameDialogClose() {
      this.$refs.contractData.validateField("userName");
      this.condition = "";
    },
    // 返回
    back() {
      this.$router.push({ path: "/service-management/contract/index" });
      // this.$router.back()
    },
    formatServiceUnit(unitCode) {
      if (unitCode) {
        return this.$t("flycare.billing_service_unit." + unitCode);
      } else {
        return "USD";
      }
    },
    // 获取合同详情
    getContractDetail() {
      // this.loading = true
      checkContract(this.$route.query.contractUuid)
        .then((res) => {
          this.contractData = res;
          this.contractData.signEntityId = res.signEntityId;
          this.userName = res.userName;
          this.moduleData = res.moduleList;
          for (let i = 0; i < this.moduleData.length; i++) {
            if (this.moduleData[i].serviceStartTime) {
              this.moduleData[i].serviceStartDate = toTenYMD(
                this.moduleData[i].serviceStartTime
              );
            }
            if (this.moduleData[i].serviceEndTime) {
              this.moduleData[i].serviceEndDate = toTenYMD(
                this.moduleData[i].serviceEndTime
              );
            }
            this.moduleData[i].creDate = toTenYMD(this.moduleData[i].creTime);
            this.moduleData[i].creTime = toTime(this.moduleData[i].creTime);
            this.moduleData[i].invalidTime = toTime(this.moduleData[i].invalidTime);
            if (this.moduleData[i].freeNum === null) {
              this.moduleData[i].freeNum = 0;
            }
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.loading = false;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.deleteCount = val.length;
    },
    // 打开合同模块对话框
    openContractModule(moduleInfo, isEdit) {
      this.contractModuleVisible = true;
      this.$nextTick(() => {
        this.$refs.contractModule.openDialog({ ...moduleInfo }, isEdit);
      });
    },
    openContractConflict(addContractResult) {
      this.contractConflictVisible = true;
      this.$nextTick(() => {
        this.$refs.contractConflict.openDialog(addContractResult);
      });
    },
    // 添加合同模块
    addContractModule(moduleInfo) {
      moduleInfo.contractUuid = this.$route.query.contractUuid;
      this.moduleLoading = true;
      addContractModule(JSON.parse(JSON.stringify(moduleInfo)))
        .then((res) => {
          this.moduleLoading = false;
          if (res && res.length > 0) {
            this.openContractConflict(res);
          } else {
            this.getContractDetail();
            this.$message.success(this.$t("common.success"));
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.moduleLoading = false;
        });
    },
    // 删除合同模块
    deleteModule(Uuid) {
      this.$confirm(this.$t("tip_content.delete_module"), "", {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          const array = [];
          array.push(Uuid);
          this.moduleLoading = true;
          deleteContractModule(array)
            .then((res) => {
              this.$message.success(this.$t("common.success"));
              // console.log(res)
              this.getContractDetail();
              this.moduleLoading = false;
            })
            .catch((err) => {
              this.$message.error(err.message);
              this.moduleLoading = false;
            });
        })
        .catch((e) => {});
    },
    // 模块批量删除
    deleteModules() {
      // 加个确认
      this.$confirm(this.$t("tip_content.delete_select_module"), "", {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          const array = [];
          for (let i = 0; i < this.multipleSelection.length; i++) {
            array.push(this.multipleSelection[i].contractModuleId);
          }
          this.moduleLoading = true;
          deleteContractModule(array)
            .then((res) => {
              this.getContractDetail();
              this.moduleLoading = false;
              // console.log(res)
            })
            .catch((err) => {
              this.$message.error(err.message);
              this.moduleLoading = false;
            });
        })
        .catch((e) => {});
    },
    // 确认修改合同模块
    editModuleInfo(moduleInfo) {
      moduleInfo.contractUuid = this.$route.query.contractUuid;
      this.moduleLoading = true;
      editContractModule(moduleInfo)
        .then((res) => {
          this.getContractDetail();
          this.$message.success(this.$t("common.success"));
          this.moduleLoading = false;
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.moduleLoading = false;
        });
    },
    // 修改自动续费属性
    updateAutoRenewal(params) {
      this.$confirm(this.$t("flycare.contract.change_auto_renewal_confirm"), "tip", {
        confirmButtonText: this.$t("common.confirm"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      }).then(() => {
        updateAutoRenewal(params)
          .then((res) => {
            this.$message.success(this.$t("common.success"));
            this.getContractDetail();
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      });
    },
    // 确认修改合同
    editContract() {
      this.$refs.contractData.validate((valid) => {
        if (valid) {
          console.log(valid);
          this.$confirm(this.$t("tip_content.edit_contract"), "", {
            confirmButtonText: this.$t("common.confirm"),
            cancelButtonText: this.$t("common.cancel"),
            type: "warning",
          })
            .then(() => {
              const temp = {
                contractUuid: this.$route.query.contractUuid,
                characterCode: this.contractData.characterCode,
                keyId: this.contractData.keyId,
                contractNum: this.contractData.contractNum,
                effectiveDate: this.contractData.effectiveDate,
                email: this.contractData.email,
                remark: this.contractData.remark,
                signEntityId: this.contractData.signEntityId,
              };
              editContract(JSON.parse(JSON.stringify(temp)))
                .then((res) => {
                  this.$router.back();
                  // console.log(res)
                })
                .catch((err) => {
                  this.$message.error(err.message);
                });
            })
            .catch((e) => {});
        }
      });
    },
    // 处理分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getContractList();
    },
    clearAllModule() {
      this.moduleForm.statisticMethodCode = "";
      this.statisticOptions.length = 0;
    },
    // 获取statisticCode对应的name
    formatterStatistic(row, column, cellValue) {
      // let obj = this.statisticOptions.find(item => item.value === cellValue)
      // return obj.label
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  margin: 0.2em 0.5em;
}
.title-logo {
  font-size: 0.8em;
  margin-left: 0px;
  color: #909399;
}
.box-header {
  font-weight: bold;
  font-size: 1.8em;
  color: #12263f;
}
.itemTime {
  display: inline-block;
  width: 300px;
}
.buttomItem {
  margin-top: 40px;
}
.theFirst {
  margin: 10px 6px;
  width: 500px;
}
.textLayout {
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectSpan {
  display: inline-block;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 50px;
}
.selectBorder {
  display: inline-block;
  width: 20px;
  height: 30px;
  vertical-align: middle;
  border-right: 1px solid black;
}
.item {
  margin-bottom: 20px;
}
.buttomItem {
  margin-top: 40px;
  float: right;
}
.selectColumn {
  width: 100%;
  height: 50px;
  margin-left: 0px;
  color: #c2c7ce;
  background-color: #edf2f9;

  &.active {
    color: #12263f;
    .buttonDelete {
      color: white;
      background-color: #2569c3;
      border: 1px solid #2569c3;
    }
  }
  .buttonDelete {
    color: #c2c7ce;
    background-color: #dde1e8;
    border: 1px solid #dde1e8;
  }
}
.flexContract {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
